<template>
  <fieldset>
    <legend>自定义指令</legend>
    <input type="text" v-has />
    <ul>
      <li v-for="item in arr" :ref="refss">
        <b v-for="k in item" ref="b">{{ k }}</b>
      </li>
    </ul>
  </fieldset>
</template>
<script>
export default {
  methods: {
    refss(input) {
      console.log(input);
    },
  },
  data() {
    return {
      msg: "red",
      arr: [
        {
          id: 1,
          name: "李雷1",
          age: 30,
        },
        {
          id: 2,
          name: "李雷2",
          age: 20,
        },
        {
          id: 3,
          name: "李雷3",
          age: 40,
        },
      ],
    };
  },
  mounted() {
    console.log(this.$refs);
  },
  directives: {
    has: {
      created(el, binding) {
        console.log(el);
        console.log(binding);
      },
      mounted(el) {
        el.focus();
      },
    },
  },
};
</script>
<style scoped>
/* :global(legend) {
  color: hotpink;
} */
</style>
